<!-- 
Copyright (c) 2008 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
   
   http://www.apache.org/licenses/LICENSE-2.0
   
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
  <head>
    <script src="../scripts/prototype-1.5.1.js" type="text/javascript"></script>
    <script src="../scripts/effects-1.7.1_beta1.js" type="text/javascript"></script>
    <script src="feedbillboard.js" type="text/javascript"></script>
    
    <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://www.google.com/jsapi?&amp;key=ABQIAAAAEfCuQGsNiSWxRgf_vfNWaRTRERdeAiwZ9EeJWta3L_JZVS0bOBTXlvjd3rDmZZuD-sIFvFhBmWo5_g"></script>
    <script type="text/javascript">
      google.load("feeds", "1");
    </script>
  </head>
  <body>
	<h1>Feed Billboard</h1>
	
	<p>
		The feed billboard lets you put together a list of feeds, and have the widget rotate through them. It uses the Feed API to get access to the feeds in a normalized fashion.
	</p>
	<p>
		The billboard is built to fully degrade on browsers that are not running JavaScript. The magic revolves around using a special class and options to a normal <code>&lt;ul&gt;</code>. The options for the ul class are:
	</p>
	<pre>
&lt;ul class="feedbillboard numberofentries:5 access:randomly timeinterval:10"&gt;</pre>

	<ul>
		<li><b>numberofentries</b>: The number of rotations before it stops</li>
		<li><b>access</b>: Go through the items in serial, or randomly</li>
		<li><b>timeinterval</b>: How many seconds in between flipping</li>
	</ul>
		
	<hr noshade="true" />
    <p>
		Here is the simplest feedbillboard example.
	</p>	
	
	<pre>
&lt;ul class="feedbillboard"&gt;
      &lt;li&gt;&lt;a href="http://code.google.com/"&gt;Google Code&lt;/a&gt; (&lt;a href="http://code.google.com/feeds/updates.xml"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://ajaxian.com/"&gt;Ajaxian&lt;/a&gt; (&lt;a href="http://ajaxian.com/feed"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://almaer.com/blog"&gt;techno.blog(Dion)&lt;/a&gt; (&lt;a href="http://almaer.com/blog/index.xml"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
	</pre>
    
    <ul class="feedbillboard">
      <li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li>
      <li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li>
      <li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li>
    </ul>

	<hr noshade="true" />
	<p>
		This is the same example but it uses a random access to the feed entries, change the number of entries, and change the time interval.
	</p>
	<pre>
&lt;ul class="feedbillboard numberofentries:4 access:randomly timeinterval:4"&gt;
      &lt;li&gt;&lt;a href="http://code.google.com/"&gt;Google Code&lt;/a&gt; (&lt;a href="http://code.google.com/feeds/updates.xml"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://ajaxian.com/"&gt;Ajaxian&lt;/a&gt; (&lt;a href="http://ajaxian.com/feed"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://almaer.com/blog"&gt;techno.blog(Dion)&lt;/a&gt; (&lt;a href="http://almaer.com/blog/index.xml"&gt;RSS&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
	</pre>

    <ul class="feedbillboard numberofentries:4 access:randomly timeinterval:4">
      <li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li>
      <li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li>
      <li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li>
    </ul>
    
  </body>
</html>
